<template>
  <div class="layout-container">
    <DataSetSelect @register="registerDataSet" @select="handleSelect" />
    <div class="component-container">
      <a-button @click="handleShowDataSet">选择数据集</a-button>
      <a-button @click="handleSave">保存数据</a-button>
      <div
        class="component-item"
        draggable="true"
        v-for="(item, index) in componentList"
        :key="index"
        @dragstart="(e) => handleDragStart(e, item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div id="main" class="component-panel">
      <div
        id="luckysheet"
        style="
          margin: 0px;
          padding: 0px;
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0px;
          top: 0px;
        "
      ></div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useModal } from '@/components/Modal';
import DataSetSelect from './dataSet/index.vue';
import { defHttp } from '@/utils/http/axios';
const [registerDataSet, { openModal }] = useModal();
const componentList = ref([]);
const handleDragStart = (e, item) => {
  console.log(e, item, 'indexItem');
  e.dataTransfer.setData('field', item.value);
};
const handleShowDataSet = () => {
  openModal(true);
};
const handleSave = () => {
  const jsonData = luckysheet.getAllSheets();
  for (let i = 0; i < jsonData.length; i++) {
    //清空data数据，以celldata数据为主
    jsonData[i]['data'] = [];
  }
  defHttp.post({
    url: '/reportExcel/edit',
    params: { id: '202', jsonStr: JSON.stringify(jsonData) },
  });
};
const handleDragOver = (e) => {
  e.preventDefault();
};
const handleDrop = (e) => {
  ;
  console.log(e, ' end ');
  e.preventDefault();
  const dom = document.getElementById('main');
  const dragDom = document.createElement('div');
  dragDom.text = '测试';
  dragDom.style.border = '1px solid #fff';
  dragDom.style.position = 'absolute';
  dragDom.innerText = 'dqdwqd';

  dragDom.onmousedown = (e) => {
    console.log('down');
    const mouseX = e.offsetX;
    const mouseY = e.offsetY;

    dom.onmousemove = (de) => {
      console.log(de, 'move');
      const targetX = de.pageX - mouseX;
      const targetY = de.pageY - mouseY;
      console.log(targetX, targetY, 'tttt');
      dragDom.style.left = targetX + 'px';
      dragDom.style.top = targetY + 'px';
      console.log(dragDom, 'dragDom');
    };
  };
  dragDom.onmouseup = () => {
    console.log('mouseup');
    dom.onmousemove = () => {};
  };
  dom.appendChild(dragDom);
};

onMounted(() => {
  //配置项
  var options = {
    lang: 'zh',
    container: 'luckysheet', //luckysheet为容器id
    enablePage: true,
    // showtoolbar: false, //是否第二列显示工具栏
    // showinfobar: false, //是否显示顶部名称栏
    // sheetFormulaBar: false,
    // showsheetbar: false,

    // allowEdit: false,
    data: [
      {
        name: 'Sheet1',
        color: '',
        status: '1',
        order: '0',
        data: [],
        config: {},
        index: 0,
      },
      {
        name: 'Sheet2',
        color: '',
        status: '0',
        order: '1',
        data: [],
        config: {},
        index: 1,
      },
      {
        name: 'Sheet3',
        color: '',
        status: '0',
        order: '2',
        data: [],
        config: {},
        index: 2,
      },
    ],
    hook: {
      cellDragStop: function (cell, postion, sheetFile, ctx, event) {
        luckysheet.setCellValue(
          postion.r,
          postion.c,
          `#{${event.dataTransfer.getData('field')}}`
        );
      },
    },
  };
  luckysheet.create(options);
  document.querySelector('.layout-container').ondragover = (e) => {
    console.log('dqdq');
    e.preventDefault();
  };
  document.querySelector('.layout-container').ondrop = (e) => {
    console.log(e, 'drop');
  };
  document.querySelector('#luckysheetcoltable_0').ondrop = (e) => {
    ;
    console.log('dddddop');
  };
  console.log(luckysheet, 'lic');
});
const handleSelect = async (setCode) => {
  const res = await defHttp.get({
    url: '/reportDataSet/getData',
    params: { setCode },
  });
  if (res.records) {
    if (res.records.length) {
      const firstData = res.records[0];
      let temp = [];
      Object.keys(firstData).forEach((f) => {
        temp.push({
          name: f,
          value: `${setCode}.${f}`,
        });
      });
      componentList.value = temp;
    }
  }
  console.log(res, 'res');
};
const getData = () => {
  const jsonData = luckysheet.getAllSheets();
  for (let i = 0; i < jsonData.length; i++) {
    //清空data数据，以celldata数据为主
    jsonData[i]['data'] = [];
  }
  console.log(JSON.stringify(jsonData), 'json');
};
</script>

<style scoped>
.layout-container {
  display: flex;
  height: 100%;
}
.layout-container .component-container {
  width: 200px;
  border: 1px solid red;
  height: 100%;
}
.layout-container .component-container .component-item {
  background: #fff;
  color: #000;
}
.layout-container .component-panel {
  position: relative;
  flex: 1;
  border: 1px solid green;
  height: 100%;
}
</style>
